<template>
   
			<div>
				<label>微博内容：</label><br>
				<textarea  class="wbContent" v-model="msg"></textarea><br>
				<input type="button" value="发表微博" class="btn" @click="add()">
			</div>
            <hr />
			<h2>微博列表：</h2>
			<ul class="list-group">
                <li class="list-group-item myLi" v-for="(v,i) in article" :key="i">
                    <span>{{v}}</span>
                    <button @click="del(i)">删除</button>
                </li>
			</ul>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
    setup () {
        const state = reactive({
           article:[
				"武汉加油",
				"中国加油！"
			],
			msg:''
        })
        // unshift() 把一个元素添加到数组的开头，并返回数组的新长度。
        const add = () => state.article.unshift(state.msg)
        
        // splice() 删除第i个位置后的一个元素
		const del = (i) => state.article.splice(i,1)

        return {
            ...toRefs(state),
            add,
            del
        }
    }
}
</script>

<style scoped>
    .wbContent{
        width: 90%;
        height: 50px;
        border-radius: 5px;
        margin: 10px;
    }
    .btn{
        background-color:dodgerblue ;
        color:white;
        border:none;
        width: 80px;
        height: 30px;
        border-radius: 5px;
    }
    .myTop{
		margin-top: 10px;
	}
	.myLi{
		margin-top: 10px;
	}
	ul li span{ cursor: pointer; }
</style>